<template>
  <div class="app-container">
    <el-form auto-Complete="on" :model="form" :rules="rules" ref="form" label-width="120px">
    <el-form-item label="应用名称" prop="name">
      <el-input v-model="form.name" auto-complete="on" placeholder="请输入应用名"></el-input>
    </el-form-item>
    <el-form-item label="通信接口" prop="gateway">
      <el-input v-model="form.gateway" auto-complete="on" placeholder="请输入应用接口"></el-input>
    </el-form-item>
    <el-form-item>
  <el-button type="primary" @click="onSubmit">确定</el-button>
  </el-form-item>
  </el-form>
  </div>

</template>

<script>
import { postAdd } from '@/api/app'

export default {
  data() {
    const ValidateName = (rule, value, callback) => {
      if (value.length < 1) {
        callback(new Error('应用名称不能为空'))
      } else {
        callback()
      }
    }
    const ValidateGateway = (rule, value, callback) => {
      if (value.length < 1) {
        callback(new Error('通信接口不能为空'))
      } else {
        callback()
      }
    }
    return {
      form: {
        name: '',
        gateway: '',
        enable: true
      },
      rules: {
        name: [{ required: true, trigger: 'blur', validator: ValidateName }],
        gateway: [{ required: true, trigger: 'blur', validator: ValidateGateway }]
      }
    }
  },
  methods: {
    onSubmit() {
      this.$refs.form.validate(valid => {
        if (!valid) {
          console.log('error submit!!')
          return false
        }
        postAdd(this.form).then(res => {
          if (res.code !== 30000) {
            return this.$message('添加失败!')
          }
          this.$message({
            type: 'success',
            message: '添加成功!'
          })
          this.$router.replace('/app/list')
        })
      })
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    }
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
</style>

